<template>
	<view>
		<!-- <u-navbar title="套餐详情" :autoBack="true" bgColor="transparent" :fixed="false"></u-navbar> -->
		<u-navbar leftText="返回" title="套餐详情" :safeAreaInsetTop="false">
			<view class="u-nav-slot flex-row align-center" slot="left">
				<u-icon @click="url('/pages/home/home')" name="arrow-left" size="20"></u-icon>
				<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
				<u-icon @click="url('/pages/home/home')" name="home" size="22"></u-icon>
			</view>
		</u-navbar>
		<view class="" style="z-index: 1;position: relative;">
			<u-swiper radius="0" height="400" :list="info.images" @change="e => currentNum = e.current"
				:autoplay="false" indicatorStyle="right: 20px" @click="viewImg">
				<view slot="indicator" class="indicator-num">
					<text class="indicator-num__text">{{ currentNum + 1 }}/{{ info.images.length }}</text>
				</view>
			</u-swiper>
			<navigator :url="`/pages/mine/complaint?package_id=${info.id}&package_name=${info.name}`" class=""
				style="z-index: 99;position: absolute;top: 30rpx;right: 30rpx;">
				<u-button text="投诉" size="mini" shape="circle" color="#000"></u-button>
			</navigator>
		</view>
		<view class="p-30 content">
			<view class="header flex-row align-center justify-between">
				<view class="title">
					{{info.name}}
				</view>
				<view class="flex-column align-end yu-color">
					<image :src="yuanbao" style="width: 60rpx;height: 60rpx;" mode="widthFix"></image>
					<view class="">
						{{info.price}}
					</view>
				</view>
			</view>
			<view class="small-size flex-row align-center">
				<u-avatar size="30" :src="info.staff.image"></u-avatar>
				<view class="ml-10" style="color: #7B73FD;">
					{{info.staff.name}}
				</view>
				<!-- <view class="ml-10 gray-color">
					注册于时间可变
				</view> -->
			</view>
			<view class="mt-30 flex-row align-center justify-between tishi">
				<view class="left">
					新客必看
				</view>
				<view class="right">
					{{configData.tishi1}}
				</view>
				<!-- <image :src="tishi" style="width: 100%;" mode="widthFix"></image> -->
			</view>
			<view class="mt-30 flex-column justify-center info" :style="'background: url('+ bg11 +') no-repeat;'" v-if="info.is_clock == 1">
				<view class="flex-row align-center justify-between">
					<view class="flex-row align-center">
						<image :src="map" style="width: 35rpx;height: 35rpx;" mode="widthFix">
						</image>
						<view class="ml-10 small-size gray-color" style="width: 92%;">
							{{info.staff.address ? info.staff.address : '********'}}
						</view>
					</view>
					<!-- <view class="small-size gray-color">一键导航</view> -->
				</view>
				<view class="flex-row align-center justify-between mt-30">
					<view class="flex-row align-center ">
						<image :src="mobile" style="width: 35rpx;height: 35rpx;" mode="widthFix">
						</image>
						<view class="ml-10 small-size gray-color" style="width: 92%;">
							{{info.staff.mobile ? info.staff.mobile : '********'}}
						</view>
					</view>
					<view class="small-size gray-color" @click="call(info.mobile)" v-if="info.mobile">一键拨打</view>
				</view>
			</view>
			<view class="mt-30 info fw-700 sub-size flex-row align-center justify-center" :style="'background: url('+ bg11 +') no-repeat;background-size: 100% 100%;color:#9A550E'" v-else>
				解锁套餐后可查看详细地址和联系方式
				<!-- <image :src="imgData.clock" style="width: 100%;height: 100rpx;" mode="widthFix"></image> -->
			</view>
			<view class="mt-30">
				<view class="">
					<u-tabs :list="list4" lineWidth="20" lineHeight="7" :lineColor="`url(${lineBg}) 100% 100%`"
						:activeStyle="{
					        color: '#303133',
					        fontWeight: 'bold',
					        transform: 'scale(1.05)'
					    }" :inactiveStyle="{
					        color: '#606266',
					        transform: 'scale(1)'
					    }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" :current="current" @change="change">
					</u-tabs>
					<view class="mt-30" v-if="current == 0">
						<view class="">
							<view class="detail-title">
								技师信息
							</view>
						</view>
						<view class="mt-30">
							<view class="flex-row align-center small-size gray-color mt-10">
								<view class="label">
									年龄:
								</view>
								<view class="">
									{{info.staff.age}}
								</view>
							</view>
							<view class="flex-row align-center small-size gray-color mt-10">
								<view class="label">
									身高:
								</view>
								<view class="">
									{{info.staff.height}}
								</view>
							</view>
							<view class="flex-row align-center small-size gray-color mt-10">
								<view class="label">
									体重:
								</view>
								<view class="">
									{{info.staff.weight}}
								</view>
							</view>
							<view class="flex-row align-center small-size gray-color mt-10">
								<view class="label">
									身材:
								</view>
								<view class="">
									{{info.staff.figure}}
								</view>
							</view>
							<view class="flex-row align-center small-size gray-color mt-10">
								<view class="label">
									照片相似度:
								</view>
								<view class="flex-row align-center">
									<u-rate readonly :count="count" v-model="info.value"
										activeColor="#FF8D57"></u-rate>5.0
								</view>
							</view>
						</view>
					</view>
					<view class="mt-30" v-else-if="current == 1">
						<view class="">
							<view class="detail-title">
								项目描述
							</view>
						</view>
						<view class="mt-30 gray-color small-size">
							<u-parse :content="info.content"></u-parse>
						</view>
					</view>
					<view class="mt-30" v-else-if="current == 2">
						<view class="">
							<view class="detail-title">
								预约时间
							</view>
						</view>
						<view class="mt-30 gray-color small-size">
							预约时间：{{info.starttime}}-{{info.endtime}}
						</view>
					</view>
				</view>
			</view>
		</view>

		<template v-if="type != 2">
			<view class="submit" v-if="info.is_clock != 1">
				<u-button @click="popupShow = true" :loading="loading" :color="$u.color.btnColor" shape="circle"
					text="解锁套餐"></u-button>
			</view>
		</template>
		<view class="submit" v-else>
			<u-button @click="modalShow = true" :loading="loading" :color="$u.color.btnColor" shape="circle"
				text="核销"></u-button>
		</view>
		<u-modal :show="modalShow" title="核销码" :closeOnClickOverlay="true" @confirm="check()">
			<view class="slot-content">
				<u-input placeholder="请输入核销码" border="surround" v-model="code"></u-input>
			</view>
		</u-modal>
		<u-popup :show="popupShow" @close="close" @open="open" round="15" closeable>
			<!-- <view class="popupConent p-30"> -->
			<view class="popupConent p-30"
				:style="'background: url(' + imgData.packageBg + ') no-repeat;background-size: 100% 100%;'">
				<view class="title text-center">
					解锁套餐
				</view>
				<view class="flex-row align-end justify-center mt-30">
					<image :src="yuanbao" style="width: 50rpx;" mode="widthFix"></image>
					<view class="big-size ml-10 price-color">
						{{info.price}}
					</view>
					<view class="price-color">
						元宝
					</view>
				</view>
				<view class="card mt-30 small-size p-30" style="min-height: 200rpx;">
					<u-parse :content="info.content"></u-parse>
				</view>
				<u-button @click="submit" text="立即解锁" :color="$u.color.btnColor" shape="circle"
					:customStyle="{'marginTop':'30rpx'}" share="circle"></u-button>
			</view>
		</u-popup>

		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		packageSubmit,
		packageCheck
	} from '@/common/api.js'
	import {
		packageDetail
	} from '@/common/api.js'
	import {
		mapState
	} from "vuex";
	import commonMixin from '@/mixins/common.js';
	import img from '@/mixins/img.js';
	export default {
		mixins: [commonMixin, img],
		data() {
			return {
				modalShow: false,
				code: '',
				current: 0,
				loading: false,
				popupShow: false,
				id: 0,
				info: {
					staff: {},
					shop: {},
					images: []
				},
				count: 5,
				value: 5,
				list4: [{
					name: '技师信息'
				}, {
					name: '项目描述'
				}, {
					name: '预约时间'
				}],
				currentNum: 0,
				list1: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],

				type: 1
			}
		},
		onLoad(e) {
			if (e.id) this.id = e.id
			if (e.type) this.type = e.type
			this.getInfo();
		},
		methods: {
			url(url) {
				uni.redirectTo({
					url
				})
			},
			viewImg(index) {
				console.log('index', index);
				uni.previewImage({
					current: index,
					urls: this.info.images,
				});
			},
			check() {
				console.log('checkcheck');
				let vm = this;
				packageCheck({
					data: {
						id: this.id,
						code: this.code
					}
				}).then(res => {
					vm.$refs.uToast.show({
						type: 'success',
						message: '核销成功',
						complete() {
							uni.hideLoading();
							vm.loading = false;
							vm.modalShow = false;
							vm.init()
						}
					})
				}).catch(err => {
					uni.hideLoading();
					vm.loading = false;
					vm.modalShow = false;
				})
			},
			change(e) {
				this.current = e.index;
			},
			submit() {
				let vm = this;
				vm.loading = true;
				packageSubmit({
					data: {
						id: this.id
					}
				}).then(res => {
					console.log(res);
					vm.popupShow = false;
					vm.$refs.uToast.show({
						type: 'success',
						message: '解锁成功',
						complete() {
							vm.loading = false;
							vm.getInfo()
						}
					})
				}).catch(err => {
					vm.loading = false;
				})
			},
			getInfo() {
				packageDetail({
					data: {
						id: this.id
					}
				}).then(res => {
					console.log('res', res);
					this.info = res
				})
			},
			open() {
				// console.log('open');
			},
			close() {
				this.popupShow = false
				// console.log('close');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nav {
		margin: 30rpx 0;
		color: #FFD8B5;
	}

	.detail-title {
		color: #000000;
		font-size: 32rpx;
		font-weight: 700;
		display: flex;
		flex-direction: row;
		align-items: center;

	}

	.detail-title::before {
		content: '';
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 20rpx;
		height: 20rpx;
		background: url('/static/img/ddf.png') no-repeat;
		margin-right: 10rpx;
	}

	.content {
		margin-top: -10rpx;
		border-top-right-radius: 30rpx;
		border-top-left-radius: 30rpx;
		min-height: 1000rpx;
		padding-bottom: 120rpx;
		z-index: 9;
		position: relative;
		background-color: #fff;
		padding-bottom: 180rpx;
	}

	.tag {
		display: flex;
		flex-direction: row;
		// justify-content: space-between;
		margin-top: 30rpx;

		&-item {
			border: 1rpx solid #E6E6E6;
			padding: 10rpx 20rpx;
			margin-left: 10rpx;
			color: #575859;
			background-color: #fff;
			border-radius: 30rpx;
			font-size: 24rpx;
		}

		&-item:first-child {
			margin: 0;
		}
	}

	.active {
		color: #A11A0E;
		border-color: #A11A0E;
		background-color: transparent;
	}

	.info {
		background-size: 100% 100%;
		width: 100%;
		min-height: 150rpx;
		padding: 30rpx;
		box-sizing: border-box
	}

	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 20rpx;
			width: 20rpx;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}

	.indicator-num {
		padding: 10rpx 15rpx;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 30px;
		@include flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 24rpx;
		}
	}

	.label {
		width: 200rpx;
	}

	.popupConent {
		min-height: 400rpx;
	}

	.submit {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		padding: 30rpx;
		box-sizing: border-box;
		z-index: 99;
	}

	.tishi {
		background-color: #FEF1DE;
		color: #9A550E;
		border-radius: 10rpx;
	}

	.left {
		width: 15%;
		background-color: #AB1F15;
		color: #fff;
		border-radius: 10rpx;
		padding: 15rpx;
		font-size: 42rpx;
		font-weight: 700;
		text-align: center;
	}

	.right {
		width: 85%;
		padding: 10rpx;
		font-size: 24rpx;
		text-align: center;
	}
</style>